@extends('layouts.app', ['active' => 4])

@section('title')编辑人员 -
@endsection
@section('style')
<link href="{{ asset('plugin/datepicker/css/foundation-datepicker.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('plugin/validation/dist/css/formValidation.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('plugin/validation/css/default.css') }}" rel="stylesheet" type="text/css"/>
@endsection

@section('content')

            <div class="panel panel-default">
                <div class="panel-heading"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> 编辑人员 ID<strong>{{ $person->id }}</strong>
                    @include('person.menu',['active' => 0])
                </div>
                <div class="panel-body">
                    @include('component.alert')

                    <form class="form-horizontal" id="editForm"  name="form1" action="{{ url('person')  . '/' . $person->id  }}" method="POST" enctype="multipart/form-data">

                      {!! csrf_field() !!}
                        {!! method_field('put') !!}
                      <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">照片<br/>请选用182*128像素大小图片</label>
                        <div class="col-sm-10" id="avatar_img_div">
                          <img src="{{ url('/') }}/@if ($person->avatar != ''){{ $person->avatar }}@else{{  'img/avatar_default.png' }}@endif"style="cursor:pointer" width="128" id="avatar_img" class="img-thumbnail" title="点击上传图片">
                            <input type="file" style="display:none" name="avatar" id="avatar"  class="form-control" value=""/>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">姓名 <span style="color:#d44950">*</span></label>
                        <div class="col-sm-10">
                          <input type="text"   value="{{ $person->name }}"  class="form-control" required="required" name="name" placeholder=""/>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="id_number" class="col-sm-2 control-label">18位身份证号 <span style="color:#d44950">*</span></label>
                        <div class="col-sm-10">
                          <input type="text" class="form-control" required="required" value="{{ $person->id_number }}" name="id_number" placeholder=""/>
                        </div>
                      </div>
                        <div class="form-group">
                            <label for="is_the_city" class="col-sm-2 control-label">是否本市 <span style="color:#d44950">*</span></label>

                            <div class="col-sm-10">
                                <select name="is_the_city" class="form-control">
                                    <option value="1" @if ($person->is_the_city == 1)selected="selected"@endif>是</option>
                                    <option value="0" @if ($person->is_the_city == 0)selected="selected"@endif>否</option>
                                </select>
                            </div>
                        </div>
                      <div class="form-group">
                        <label for="reg_addr" class="col-sm-2 control-label">户籍地 <span style="color:#d44950">*</span></label>
                        <div class="col-sm-10">
                          <div id="distpicker_reg" class="form-inline">
                            <select class="form-control"></select>
                            <select class="form-control"></select>
                            <select class="form-control"></select>
                          </div>
                          <input type="hidden"  class="form-control" required="required" id="reg_addr" name="reg_addr" value="{{ $person->reg_addr }}" placeholder=""/>
                        </div>
                      </div>

                      <div class="form-group">
                        <label for="temp_addr" class="col-sm-2 control-label">暂住地 <span style="color:#d44950">*</span></label>
                        <div class="col-sm-10">
                          <div id="distpicker_temp" class="form-inline">
                            <select class="form-control"></select>
                            <select class="form-control"></select>
                            <select class="form-control"></select>
                          </div>
                          <input type="hidden"  class="form-control" required="required" value="{{ $person->temp_addr }}" id="temp_addr" name="temp_addr" placeholder=""/>
                        </div>
                      </div>
                        @if (count($person->times) > 0)
                        <div class="form-group">
                            <label for="time_archive" class="col-sm-2 control-label">来我市时间记录 <span style="color:#d44950">*</span></label>
                            <div class="col-sm-10">
                                <div class="form-inline">
                                    <select class="form-control"  id="time_archive">
                                    @foreach($person->times as $k=>$v)
                                        <option value="{{date('Y-m-d', $v['five_saw_time']) . ' ' .date('Y-m-d',  $v['leave_time']) . ' ' . $v['id']}}">{{date('Y-m-d', $v['five_saw_time'])}}来我市， {{date('Y-m-d', $v['leave_time'])}}离开</option>
                                    @endforeach
                                    </select>
                                    <input type="hidden" id="person_times_id" value="" name="person_times_id"/>

                                </div>
                            </div>
                        </div>
                        @endif
                      <div class="form-group">
                        <label for="five_saw_time" class="col-sm-2 control-label">到我市时间</label>
                        <div class="col-sm-10">
                          <input type="text" style="background-color:#fff" id="five_saw_time" onClick="WdatePicker({minDate:'{{date('Y-m-d', $person->min_time)}}'})" readonly oninvalid="this.setCustomValidity('日期格式错误');" value="{{ empty($person->five_saw_time) ? '' : date('Y-m-d', $person->five_saw_time)}}" class="form-control"  name="five_saw_time" placeholder=""/>
                        </div>
                      </div>
                        <div class="form-group">
                            <label for="five_saw_time" class="col-sm-2 control-label">离开我市时间</label>
                            <div class="col-sm-10">
                                <input type="leave_time" style="background-color:#fff" onClick="WdatePicker({minDate:'{{date('Y-m-d', $person->min_time)}}'})" id="leave_time" readonly    value="{{ empty($person->leave_time) ? '' : date('Y-m-d', $person->leave_time)}}" class="form-control"  name="leave_time"  placeholder=""/>
                            </div>
                        </div>
                      <div class="form-group">
                            <label for="meet_situation" class="col-sm-2 control-label">见面情况</label>
                            <div class="col-sm-10">
                                <textarea name="meet_situation" maxlength="255" rows="5" class="form-control"  placeholder="最多255位">{{ $person->meet_situation }}</textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="remark" class="col-sm-2 control-label">我市活动情况</label>
                            <div class="col-sm-10">
                                <textarea name="remark" style="" id="remark" rows="10" class="form-control"  placeholder="">{{ $person->remark }}</textarea>

                            </div>
                        </div>
                      <div class="form-group">
                        <label for="phone" class="col-sm-2 control-label"> <span style="color:#d44950">*</span>手机号</label>
                        <div class="col-sm-10">
                          <input type="text"    class="form-control" required="required" value="{{ $person->phone }}" name="phone" placeholder=""/>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="qq" class="col-sm-2 control-label">QQ</label>
                        <div class="col-sm-10">
                          <input type="text" class="form-control" name="qq" value="{{ $person->qq }}"  placeholder=""/>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="weixin" class="col-sm-2 control-label">微信</label>
                        <div class="col-sm-10">
                          <input type="text"  class="form-control"  name="weixin" value="{{ $person->weixin }}" placeholder=""/>
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <input type="hidden"  class="form-control"  name="id" value="{{ $person->id }}"/>
                            <button type="submit" id="submit_btn" class="btn btn-success btn-block">编辑</button>
                        </div>
                      </div>
                    </form>
                </div>
            </div>


@endsection

@section('script')
    <script type="text/javascript" src="{{ asset('plugin/ckeditor/ckeditor.js') }}"></script>
    <script type="text/javascript" src="{{ asset('plugin/distpicker/js/distpicker.data.js') }}"></script>
    <script type="text/javascript" src="{{ asset('plugin/distpicker/js/distpicker.js') }}"></script>
    <script type="text/javascript" src="{{ asset('plugin/My97DatePicker/WdatePicker.js')}}"></script>
    <script type="text/javascript" src="{{ asset('plugin/validation/dist/js/formValidation.js')}}"></script>
    <script type="text/javascript" src="{{ asset('plugin/validation/dist/js/framework/bootstrap.js')}}"></script>
    <script type="text/javascript" src="{{ asset('plugin/validation/dist/js/language/zh_CN.js')}}"></script>

    <script type="text/javascript">
        CKEDITOR.replace( 'remark'
        );
    </script>

    <script>
// 预览图片
function PreviewImage(fileObj,imgPreviewId,divPreviewId){

    var allowExtention=".jpg,.bmp,.gif,.png";//允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
    var extention=fileObj.value.substring(fileObj.value.lastIndexOf(".")+1).toLowerCase();
    var browserVersion= window.navigator.userAgent.toUpperCase();
    if(allowExtention.indexOf(extention)>-1){

        if(fileObj.files){//HTML5实现预览，兼容chrome、火狐7+等
            if(window.FileReader){
                var reader = new FileReader();
                reader.onload = function(e){
                    document.getElementById(imgPreviewId).setAttribute("src",e.target.result);
                }
                reader.readAsDataURL(fileObj.files[0]);
            }else if(browserVersion.indexOf("SAFARI")>-1){
                alert("不支持Safari6.0以下浏览器的图片预览!");
            }
        }else if (browserVersion.indexOf("MSIE")>-1){
            if(browserVersion.indexOf("MSIE 6")>-1){//ie6
                document.getElementById(imgPreviewId).setAttribute("src",fileObj.value);
            }else{//ie[7-9]
                fileObj.select();
                if(browserVersion.indexOf("MSIE 9")>-1)
                    fileObj.blur();//不加上document.selection.createRange().text在ie9会拒绝访问
                var newPreview =document.getElementById(divPreviewId+"New");
                if(newPreview==null)  {
                         newPreview =document.createElement("div");
                        newPreview.setAttribute("id", divPreviewId + "New");
                        newPreview.style.width = document.getElementById(imgPreviewId).width + "px";
                        newPreview.style.height = document.getElementById(imgPreviewId).height + "px";
                        newPreview.style.border = "solid 1px #d2e2e2";
                    }
                newPreview.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
                var tempDivPreview=document.getElementById(divPreviewId);
                tempDivPreview.parentNode.insertBefore(newPreview,tempDivPreview);
                tempDivPreview.style.display="none";
            }
        }else if(browserVersion.indexOf("FIREFOX")>-1){//firefox
            var firefoxVersion= parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
            if(firefoxVersion<7){//firefox7以下版本
                document.getElementById(imgPreviewId).setAttribute("src",fileObj.files[0].getAsDataURL());
            }else{//firefox7.0+
                document.getElementById(imgPreviewId).setAttribute("src",window.URL.createObjectURL(fileObj.files[0]));
            }
        }else{
            document.getElementById(imgPreviewId).setAttribute("src",fileObj.value);
        }
    }else{
        alert("仅支持"+allowExtention+"为后缀名的文件!");
        fileObj.value="";//清空选中文件
        if(browserVersion.indexOf("MSIE")>-1){
            fileObj.select();
            document.selection.clear();
        }
        fileObj.outerHTML=fileObj.outerHTML;
    }
}

  $(function(){
    $('#avatar_img').click(function(){
        $('#avatar').click();
    });
    $('#avatar').change(function(){
      PreviewImage(this,'avatar_img','avatar_img_div')
    });
  });
</script>

<script>
  $(function () {
    $("#distpicker_reg").change(function(){
      var reg_addr = new Array()
      $("#distpicker_reg select").each(function(i){
          reg_addr[i] = $(this).val();
      });
      $('#reg_addr').val(reg_addr);

    });
    $("#distpicker_reg").distpicker({
      placeholder: false,
        province: "{{ $person->reg_addr2[0] }}",
        city: "{{ $person->reg_addr2[1] }}",
        district: "{{ $person->reg_addr2[2] }}",
    });
    $("#distpicker_reg").change();

    $("#distpicker_temp").change(function(){
      var temp_addr = new Array()
      $("#distpicker_temp select").each(function(i){
          temp_addr[i] = $(this).val();
      });
      $('#temp_addr').val(temp_addr);
    });
    $("#distpicker_temp").distpicker({
      placeholder: false,
      province: "{{ $person->temp_addr2[0] }}",
      city: "{{ $person->temp_addr2[1] }}",
        district: "{{ $person->temp_addr2[2] }}",
    });
    $("#distpicker_temp").change();
  });
</script>


    <script type="text/javascript">
        $(document).ready(function() {
            // Generate a simple captcha
//            function randomNumber(min, max) {
//                return Math.floor(Math.random() * (max - min + 1) + min);
//            };
//            $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

            $('#editForm').formValidation({
                message: '值验证失败',
                icon: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    name: {
                        validators: {
                            notEmpty: {
                                message: '姓名不能为空'
                            },
                            regexp: {
                                regexp: /^[A-Za-z0-9\u4e00-\u9fa5]{1,10}$/,
                                message: '姓名格式错误'
                            }

                        }
                    },
                    id_number: {
                        validators: {
                            notEmpty: {
                                message: '身份证不能为空'
                            },
                            regexp: {
                                regexp: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                                message: '身份证格式错误'
                            }
                        }
                    },
//                    leave_time: {
//                        validators: {
//                            callback: {
//                                message: '离开时间不能小于到我市时间',
//                                callback: function(value, validator, $field) {
//                                    var leave_time = $('#leave_time').val();
//                                    var five_saw_time = $('#five_saw_time').val();
//                                    if (leave_time.length > 0 && five_saw_time.length > 0 ) {
//                                        if (leave_time < five_saw_time)
//                                            return false;
//                                    }
//                                    return true;
//
//                                }
//                            }
//                        }
//                    },
                    phone: {
                        validators: {
                            notEmpty: {
                                message: '手机号不能为空'
                            },
                            regexp: {
                                regexp:  /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/,
                                message: '手机号格式错误'
                            }
                        }
                    },

                    qq: {
                        validators: {
                            regexp: {
                                regexp:  /^[1-9][0-9]{4,14}$/,
                                message: 'qq号格式错误'
                            }
                        }
                    },

                    weixin: {
                        validators: {
                            regexp: {
                                regexp:  /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/,
                                message: '微信号格式错误'
                            }
                        }
                    },


                }
            });
        });
    </script>
    <script>
        $(function(){
            $('#time_archive').change(function(){
//               var date_str = $(this).val();
//               date_str = date_str.split(' ');
//               //alert(date_str[0]);
//               $('#five_saw_time').val(date_str[0]);
//                $('#leave_time').val(date_str[1]);
//                $('#person_times_id').val(date_str[2]);

            });
        })


    </script>
@endsection
